import React, { Component } from 'react';
import { Link } from 'react-router-dom';

// require('./../mock')

class Com extends Component {
  constructor(props) {
    super(props);
    this.state={
      fname:''
    }
  }
  componentDidMount () {
    let fname = JSON.parse(localStorage.getItem('f_name'))
    this.setState({
      fname:fname
    })
  }
  listt1 () {
    let meatList = this.refs.pg.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  listt2 () {
    let meatList = this.refs.whr.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  listt3 () {
    let meatList = this.refs.jt.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  listt4 () {
    let meatList = this.refs.jc.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  listt5 () {
    let meatList = this.refs.nn.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  listt6 () {
    let meatList = this.refs.fn.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  listt7 () {
    let meatList = this.refs.yt.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  listt8 () {
    let meatList = this.refs.yc.innerHTML
    localStorage.setItem('f_name', JSON.stringify(meatList))
    this.props.history.go()
  }
  
  render() {
    return (
      <div>
          <div className="Kind_Choice">
            <span><Link to={{pathname:"/home"}}>首页</Link></span><p>></p><span><Link to={{pathname:"/kind"}}>全部分类</Link></span><p>></p><h3>{this.state.fname}</h3>
          </div> 
          <div className="Kind_nav"> 
          {/* 左上 选择 */}
          <ul className="meatAndveg">
            <li>
             猪肉
              <ul>
                <li onClick={ this.listt1.bind(this) } ref="pg">排骨</li>
                <li onClick={ this.listt2.bind(this) } ref="whr">五花肉</li>
              </ul>
            </li>
            <li>
              鸡肉
              <ul>
                <li onClick={ this.listt3.bind(this) } ref="jt">鸡腿</li>
                <li onClick={ this.listt4.bind(this) } ref="jc">鸡翅</li>
              </ul>
            </li>
            <li>
               牛肉
              <ul>
                <li onClick={ this.listt5.bind(this) } ref="nn">牛腩</li>
                <li onClick={ this.listt6.bind(this) } ref="fn">肥牛</li>
              </ul>
            </li>
            <li>
              鸭
              <ul>
                <li onClick={ this.listt7.bind(this) } ref="yt">鸭腿</li>
                <li onClick={ this.listt8.bind(this) } ref="yc">鸭翅</li>
              </ul>
            </li>
          </ul>
        </div>
    </div>
    )
  }
}

export default Com;